<template>
  <div>
    <div id="components-form-demo-advanced-search">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          退件编号：<a-input
            :maxLength="128"
            v-model="searchData.applyCode"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          运单号：<a-input
            :maxLength="128"
            v-model="searchData.waybillNm"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          退至仓库：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.warehouseId"
            allowClear
          >
            <a-select-option
              :value="item.warehouseId"
              v-for="item in clientWareHouse"
              :key="item.warehouseId"
            >
              {{ item.titleName }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="!expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
          <div v-show="expand">
            创建时间：<a-range-picker
              v-model="acTime"
              @change="onStartDateChange"
              style="width: 60%"
            />
          </div>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-show="expand">
        <a-col :span="6">
          退件处理：<a-select
            v-model="searchData.typeId"
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
          >
            <a-select-option
              :value="item.key"
              v-for="item in treatmentArray"
              :key="item.key"
              :titles="item.title"
            >
              {{ item.title }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div v-show="expand">
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTableList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
            <a
              :style="{ marginRight: '8px', fontSize: '14px' }"
              @click="expand = !expand"
            >
              {{ expand ? "折叠" : "展开" }}
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </div>
        </a-col>
        <a-col :span="6"> </a-col>
        <a-col :span="6"> </a-col>
      </a-row>
    </div>
    <div class="btn" style="display: flex; margin-top: 10px">
      <div class="news">
        <a-button
          style="margin-right: 15px"
          type="primary"
          class="blueBtn"
          @click="showModal"
        >
          新建退件申请
        </a-button>
      </div>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-tabs default-active-key="6" @change="callback">
        <a-tab-pane key="6">
          <span slot="tab">
            <a-badge
              :count="counts === null ? 0 : counts[0].toReceive"
              :offset="[15, 0]"
              >待接收
            </a-badge>
          </span>
          <ReturnTable
            :tabKey="tabKey"
            port="clientSide"
            :getTableList="getTableList"
            :getCountList="getCountList"
            v-if="tabKey === '6'"
            :tabList="tabList"
          />
        </a-tab-pane>
        <a-tab-pane key="500">
          <span slot="tab">
            <a-badge
              :count="counts === null ? 0 : counts[0].toChConfirmed"
              :offset="[15, 0]"
              >待确认
            </a-badge>
          </span>
          <ReturnTable
            :tabKey="tabKey"
            port="clientSide"
            :getTableList="getTableList"
            :getCountList="getCountList"
            v-if="tabKey === '500'"
            :tabList="tabList"
          />
        </a-tab-pane>
        <a-tab-pane key="600">
          <span slot="tab">
            <a-badge
              :count="counts === null ? 0 : counts[0].receive"
              :offset="[15, 0]"
              >已接收
            </a-badge>
          </span>
          <ReturnTable
            :tabKey="tabKey"
            port="clientSide"
            :getTableList="getTableList"
            :getCountList="getCountList"
            v-if="tabKey === '600'"
            :tabList="tabList"
          />
        </a-tab-pane>
        <a-tab-pane key="56">
          <span slot="tab">
            <a-badge
              :count="counts === null ? 0 : counts[0].complete"
              :offset="[15, 0]"
              >处理完成
            </a-badge>
          </span>
          <ReturnTable
            :tabKey="tabKey"
            port="clientSide"
            :getTableList="getTableList"
            :getCountList="getCountList"
            v-if="tabKey === '56'"
            :tabList="tabList"
          />
        </a-tab-pane>

        <a-tab-pane key="66">
          <span slot="tab">
            <a-badge
              :count="counts === null ? 0 : counts[0].cancel"
              :offset="[15, 0]"
              >取消入库
            </a-badge>
          </span>
          <ReturnTable
            :tabKey="tabKey"
            port="clientSide"
            :getTableList="getTableList"
            :getCountList="getCountList"
            v-if="tabKey === '66'"
            :tabList="tabList"
          />
        </a-tab-pane>
      </a-tabs>
    </a-spin>
    <!-- test -->
    测试
    <a-form-model ref="ruleForm" :model="model">
      <a-table
        size="small"
        bordered
        :data-source="model.testTable"
        :pagination="false"
      >
        <a-table-column key="name" data-index="name" align="center" width="10%">
          <span slot="title"> 物流商</span>
          <template slot-scope="text, record, index">
            <a-form-model-item
              :prop="'testTable.' + index + '.name'"
              :rules="rules.name"
            >
              <a-input
                :maxLength="128"
                v-model="record.name"
                style="width: 60%"
              />
              <a-button
                type="primary"
                class="searchBtn"
                @click="pdd(text, record, index)"
              >
                查询
              </a-button>
            </a-form-model-item>
          </template>
        </a-table-column>
        <a-table-column key="id" data-index="id" align="center" width="10%">
          <span slot="title"> 运单号</span>
        </a-table-column>
        <a-table-column key="SKU" data-index="SKU" align="center" width="10%">
          <span slot="title"> SKU</span>
        </a-table-column>
      </a-table>
    </a-form-model>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>
    <!-- 新建退件模态框 -->
    <AddreturnModal
      :warehouse="clientWareHouse"
      :tabKey="tabKey"
      :getTableList="getTableList"
      :getCountList="getCountList"
      ref="AddreturnModal"
    />
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  by_retreatApply_pageApply,
  by_retreatApply_count,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import { treeTagDictionary } from "@/apis/common";
import ReturnTable from "@/components/clientSide/Returns/ReturnTable.vue";
import AddreturnModal from "@/components/clientSide/Returns/AddreturnModal.vue";
export default {
  components: {
    AddreturnModal,
    ReturnTable,
  },
  created() {
    this.getTableList();
    this.getSelection();
  },
  data() {
    return {
      treatmentArray: [],
      //状态统计
      counts: [{ toReceive: 0 }],
      total: 5,
      tabList: [],
      tabKey: "6",
      spinning: false,
      acTime: null,
      expand: false,
      searchData: {
        current: 1,
        retreatType: 0,
        size: 10,
        retreatState: "6",
        applyCode: null,
        waybillNm: null,
        warehouseId: null,
        startDate: null,
        endtDate: null,
        typeId: null,
      },
      testForm: {},
      model: {
        testTable: [
          { name: "re", id: 123 },
          { name: 123, id: 555 },
        ],
      },
      rules: {
        name: [
          {
            required: true,
            message: "Please input Activity name",
            trigger: "blur",
          },
          {
            min: 3,
            max: 5,
            message: "Length should be 3 to 5",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    pdd() {
      this.$refs.ruleForm.validate();
    },
    //获取下拉框选择值
    async getSelection() {
      let { code, responseBody } = await treeTagDictionary({
        tagType: 8,
      });
      if (code === "200") {
        this.treatmentArray = responseBody;
      }
    },
    resetSearch() {
      this.searchData.waybillNm = null;
      this.searchData.applyCode = null;
      this.searchData.warehouseId = null;
      this.searchData.startDate = null;
      this.searchData.endtDate = null;
      this.searchData.typeId = null;
      this.acTime = null;
      this.getTableList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTableList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTableList();
    },
    //新建退件申请
    showModal() {
      this.$refs.AddreturnModal.showModal();
    },
    //标签页切换
    callback(key) {
      this.searchData.current = 1;
      this.searchData.retreatState = key;
      this.tabKey = key;
      this.getTableList();
    },
    //时间查询
    onStartDateChange(date, dateString) {
      this.searchData.startDate = dateString[0];
      this.searchData.endtDate = dateString[1];
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    async getTableList() {
      this.spinning = true;
      let { code, responseBody } = await by_retreatApply_pageApply(
        this.searchData
      );
      if (code === "200") {
        this.tabList = responseBody.records;
        this.total = responseBody.total * 1;
        this.getCountList();
        this.spinning = false;
      }
    },
    async getCountList() {
      let { code, responseBody } = await by_retreatApply_count(0);
      if (code === "200") {
        this.counts = responseBody[0] === null ? null : responseBody;
      }
    },
  },
  computed: {
    ...mapState(["clientWareHouse"]),
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
/deep/.blueBtn {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
.blueBtn:focus,
.blueBtn:hover {
  background: #409cff;
  color: #fff !important;
  border: 1px solid #409cff !important;
}
/deep/ .ant-form-explain {
  display: none;
}
/deep/ .ant-form-item {
  margin-bottom: 0;
}
</style>
